

<template>
    <!-- <view
        style="width: 750rpx; position: fixed; z-index: 100; background: #fff"
        :style="{ height: systemInfo.statusBarHeight + 'px' }"
    ></view>
    <view
        class="header_main d-r"
        :style="{ top: systemInfo.statusBarHeight + 'px' }"
    >
        <view class="left_box d-r" @tap="goBack">
            <image src="/static/center/back.png" class="back"></image>
        </view>
        <view class="title_box">
            <text class="title">{{titleText}}</text>
        </view>

        <view class="right_box d-r" @tap="goConfig">
            <image src="/static/center/dian.png" class="dian"></image>
        </view>
    </view> -->

    <view
            style="width: 750rpx; position: fixed; z-index: 100;background:#fff;"
            :style="{
                height: barHeight + 'px',
            }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;"
            :style="{ top: barHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title ell" style="max-width:500rpx;">{{titleText}}</view>
            <!-- <view class="right_box" v-if="showRight" @tap="showAction">
                <image src="/static/center/dian.png" class="dian"></image>
            </view> -->
        </view>

    <view
        class="webContent d-flex"
        :style="{ top: barHeight + 50 + 'px' }"
    >
        <web-view
            ref="web"
            style="flex: 1"
            :webview-styles="webviewStyles"
            :src="url"
        ></web-view>
    </view>


    



</template>

<script setup lang="ts">
import { ref, computed,reactive } from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
const systemInfo = systemInfoStore();
const userData = userDataStore();

const titleText = ref('');
const url = ref('https://www.baidu.com');
const web = ref(null);
const showRight = ref(true);

const loadTime = new Date().getTime();

const webviewStyles = ref({
    progress: {
        color: "#1DC691",
    },
});

const barHeight = computed(()=>{
    if(systemInfo.statusBarHeight){
        return systemInfo.statusBarHeight
    }

    return 44;
})


const showAction = ()=>{
    uni.showActionSheet({
                title: "是否删除该条消息?",
                itemColor: "#23e2a6",
                itemList: ["确认"],
                success: async (res) => {
                    if (res.tapIndex === 0) {
                    }
                },
    });
}


const goBack = () => {
    uni.navigateBack();
};

const getTitle=()=>{
    const wv = currentWebview.children()[0]
    if(!wv){
        setTimeout(()=>{
            getTitle();
        },10)
        return
    }

    let top = null;

    if(systemInfo.statusBarHeight){
        top = uni.upx2px(100)+systemInfo.statusBarHeight;
    }else{
        top = uni.upx2px(100)+44;
    }

    //const height = systemInfo.windowHeight;
    if(!titleText.value){
        setTitle();
    }
	wv.setStyle({top,bottom:0})
}

const setTitle=()=>{

    let now = new Date().getTime();

    if(now-loadTime>5000){
        if(!titleText.value){
            titleText.value = '浏览器';
        }
        return;
    }

   const wv = currentWebview.children()[0]
   const t = wv.getTitle();
   if(!t){
     setTimeout(()=>{
            setTitle();
        },10)
    return
   }
   titleText.value = t||'浏览器';

}

let currentWebview = null;

const slideDownVisible = ref(false);
const toggleSlideDown = () => {
    slideDownVisible.value = !slideDownVisible.value;
};

const slideDownTop = computed(() => {
    return systemInfo.statusBarHeight + uni.upx2px(80);
});



onReady(() => {


});

onLoad((option: any) => {
    // const obj = uni.getWindowInfo();
    // systemInfo.setSystemInfo(obj);
    if(option.title){
        showRight.value = false;
        titleText.value = option.title||'浏览器';
        url.value = option.url;
    }

    console.log('ooooooooooooooo')
    console.log('ooooooooooooooo')
    console.log('ooooooooooooooo')
    console.log(option.url)

    if(option.url){
        url.value = option.url;
    }


    // #ifdef APP-PLUS
		const pages = getCurrentPages();
	    const page = pages[pages.length - 1];
	    currentWebview = page.$getAppWebview();
         getTitle();
		// #endif

});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.webContent {
    position: absolute;
    width: 750rpx;
    left: 0;
    right: 0;
    bottom: 0;
}

.slide_down_box {
    position: fixed;
    z-index: 1000;
    top: 150rpx;
    right: 34rpx;
    width: 260rpx;
    height: 418rpx;
    .box {
        width: 260rpx;
        height: 400rpx;
        border-radius: 10rpx;
        background: #4c4c4c;
        margin-top: 14rpx;
        .row1 {
            padding: 0 20rpx;
            padding-left:30rpx;
            height: 100rpx;
            .text {
                font-size: 30rpx;
                color: #fff;
                margin-left: 20rpx;
            }
        }
    }
    .dot1 {
        position: absolute;
        top: 0;
        right: 17rpx;
        transform: rotate(180deg);
        transform-origin: center;
        width: 30rpx;
        height: 18rpx;
    }
}

.header_main {
    position: fixed;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 50px;
    background: #fff;
    align-items: center;
    justify-content: center;

    .title_box {
        align-items: center;
        justify-content: center;
        .base_title_name {
            font-size: 20rpx;
            font-weight: 600;
        }
    }
    .title {
        font-size: 32rpx;
        font-weight: 600;
    }

    .left_box {
        position: absolute;
        min-width: 50rpx;
        height: 50px;
        top: 0;
        left: 20rpx;
        align-items: center;
        justify-content: flex-start;
    }
    .right_box {
        position: absolute;
        min-width: 50rpx;
        height: 50px;
        right: 20rpx;
        align-items: center;
        justify-content: flex-end;
    }

    .back,
    .dian {
        width: 48rpx;
        height: 48rpx;
    }
}
</style>
